<!--
 * hi-switch - 开关选择器
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-switch" :class="_classes" :style="_styles" @tap="handleClick">
        <view class="hi-switch__node">
            <!-- loading -->
            <hi-icon class="hi-switch__icon hi-switch__icon--loading" :name="loadingIcon" v-if="loading"></hi-icon>

            <!-- off 图标 -->
            <hi-icon class="hi-switch__icon hi-switch__icon--off" :name="offIcon" v-if="offIcon && !loading && !modelValue"></hi-icon>

            <!-- on 图标 -->
            <hi-icon class="hi-switch__icon hi-switch__icon--on" :name="onIcon" v-if="onIcon && !loading && modelValue"></hi-icon>

            <!-- off 文字 -->
            <text class="hi-switch__text hi-switch__text--off" v-if="offText && !loading && !modelValue && !inside">{{ offText }}</text>

            <!-- on 文字 -->
            <text class="hi-switch__text hi-switch__text--on" v-if="onText && !loading && modelValue && !inside">{{ onText }}</text>
        </view>

        <!-- on 文字 -->
        <text class="hi-switch__text hi-switch__text--on" v-if="onText && !loading && inside">{{ onText }}</text>

        <!-- off 文字 -->
        <text class="hi-switch__text hi-switch__text--off" v-if="offText && !loading && inside">{{ offText }}</text>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { ref, computed } from "vue";
    import props from "./props.js";

    // props
    const _props = defineProps(props);

    // emits
    const _emits = defineEmits(["change", "asyncChange", "update:modelValue"]);

    // classes
    const _classes = computed(() => {
        const classes = [];

        // 状态
        if (_props.modelValue) classes.push("hi-switch--on");
        else classes.push("hi-switch--off");

        // 是否禁用
        if (_props.disabled || _props.loading) classes.push("hi-disabled hi-switch--disabled");

        // 文字在圆下面
        if (_props.inside) classes.push("hi-switch--inside");

        // 主题
        if (_props.theme) classes.push(`hi-switch--theme--${_props.theme}`);

        return classes;
    });

    // styles
    const _styles = computed(() => {
        const styles = [];

        // 开关宽度
        if (_props.width) styles.push(`--hi-switch-width: ${_props.width}`);

        // 圆的大小
        if (_props.circleSize) styles.push(`--hi-switch-circle-size: ${_props.circleSize}`);

        // 圆和开关的距离
        if (_props.distance) styles.push(`--hi-switch-distance: ${_props.distance}`);

        // 自定义颜色
        if (_props.offColor) styles.push(`--hi-switch-off-color: ${_props.offColor}`);
        if (_props.onColor) styles.push(`--hi-switch-on-color: ${_props.onColor}`);

        // 主题
        if (_props.theme) styles.push(`--hi-switch-on-color: var(--hi-theme-${_props.theme})`);

        // loading 大小 && loading 颜色
        if (_props.loadingSize) styles.push(`--hi-switch-loading-icon-font-size: ${_props.loadingSize}`);
        if (_props.loadingColor) styles.push(`--hi-switch-loading-icon-color: ${_props.loadingColor}`);

        // off 图标大小 && off 图标颜色
        if (_props.offIconSize) styles.push(`--hi-switch-off-icon-font-size: ${_props.offIconSize}`);
        if (_props.offIconColor) styles.push(`--hi-switch-off-icon-color: ${_props.offIconColor}`);

        // on 图标大小 && on 图标颜色
        if (_props.onIconSize) styles.push(`--hi-switch-on-icon-font-size: ${_props.onIconSize}`);
        if (_props.onIconColor) styles.push(`--hi-switch-on-icon-color: ${_props.onIconColor}`);

        // off 文字大小 && off 文字颜色
        if (_props.offTextFontSize) styles.push(`--hi-switch-off-text-font-size: ${_props.offTextFontSize}`);
        if (_props.offTextColor) styles.push(`--hi-switch-off-text-color: ${_props.offTextColor}`);

        // on 文字大小 && on 文字颜色
        if (_props.onTextFontSize) styles.push(`--hi-switch-on-text-font-size: ${_props.onTextFontSize}`);
        if (_props.onTextColor) styles.push(`--hi-switch-on-text-color: ${_props.onTextColor}`);

        // 圆的背景
        if (_props.circleBg) styles.push(`--hi-switch-node-background: ${_props.circleBg}`);

        return styles;
    });

    // 点击事件
    function handleClick() {
        const nowValue = _props.modelValue;

        // 异步
        if (_props.async) {
            _emits("asyncChange", nowValue);
            return;
        }

        // 非异步
        _emits("update:modelValue", !nowValue);
        _emits("change", !nowValue);
    }
</script>

<style lang="scss" scoped>
    .hi-switch {
        display: inline-flex;
        align-items: var(--hi-switch-align-items, center);
        justify-content: var(--hi-switch-justify-content, space-between);
        height: var(--hi-switch-height, calc(var(--hi-switch-circle-size) + var(--hi-switch-distance) * 2));
        width: var(--hi-switch-width, 4em);
        padding: var(--hi-switch-padding, 0 8px);
        border-radius: var(--hi-switch-border-radius, 100em);
        position: relative;
        transition: var(--hi-switch-transition, 0.3s);

        &__node {
            width: var(--hi-switch-circle-size);
            height: var(--hi-switch-circle-size);
            background: var(--hi-switch-node-background, var(--hi-background-element));
            border-radius: var(--hi-switch-node-border-radius, 50%);
            position: absolute;
            z-index: var(--hi-switch-node-z-index, 2);
            transition: var(--hi-switch-node-transition, left 0.3s);
            display: var(--hi-switch-node-display, flex);
            align-items: var(--hi-switch-node-align-items, center);
            justify-content: var(--hi-switch-node-justify-content, center);
        }

        &__icon {
            --hi-icon-font-size: var(--hi-switch-icon-font-size, calc(var(--hi-switch-circle-size) * 0.6));
            --hi-icon-color: var(--hi-switch-icon-color, inherit);

            &--loading {
                animation-name: hi-animate-spin;
                animation-duration: var(--hi-switch-loading-duration, 1500ms);
                animation-timing-function: var(--hi-switch-loading-timing-function, linear);
                animation-iteration-count: var(--hi-switch-loading-iteration-count, infinite);
                --hi-icon-font-size: var(--hi-switch-loading-icon-font-size, calc(var(--hi-switch-circle-size) * 0.6));
                --hi-icon-color: var(--hi-switch-loading-icon-color, var(--hi-theme-primary));
            }

            &--off {
                --hi-icon-color: var(--hi-switch-off-icon-color, var(--hi-switch-off-color, var(--hi-background-default)));
                --hi-icon-font-size: var(--hi-switch-off-icon-font-size, calc(var(--hi-switch-circle-size) * 0.6));
            }

            &--on {
                --hi-icon-color: var(--hi-switch-on-icon-color, var(--hi-switch-on-color, var(--hi-theme-primary)));
                --hi-icon-font-size: var(--hi-switch-on-icon-font-size, calc(var(--hi-switch-circle-size) * 0.6));
            }
        }

        &__text {
            color: var(--hi-switch-text-color, inherit);
            font-size: var(--hi-switch-text-font-size, calc(var(--hi-switch-circle-size) * 0.4));

            &--off {
                color: var(--hi-switch-off-text-color, var(--hi-switch-off-color, var(--hi-background-default)));
                font-size: var(--hi-switch-off-text-font-size, calc(var(--hi-switch-circle-size) * 0.4));
            }

            &--on {
                color: var(--hi-switch-on-text-color, var(--hi-switch-on-color, var(--hi-theme-primary)));
                font-size: var(--hi-switch-on-text-font-size, calc(var(--hi-switch-circle-size) * 0.4));
            }
        }

        &--on {
            background: var(--hi-switch-on-color, var(--hi-theme-primary));

            .hi-switch__node {
                left: calc(100% - var(--hi-switch-distance) - var(--hi-switch-circle-size));
                top: var(--hi-switch-distance);
            }
        }

        &--off {
            background: var(--hi-switch-off-color, var(--hi-background-default));

            .hi-switch__node {
                left: var(--hi-switch-distance);
                top: var(--hi-switch-distance);
            }
        }

        &--inside {
            .hi-switch__text {
                &--off {
                    color: var(--hi-switch-off-text-color, var(--hi-switch-off-color, var(--hi-theme-primary)));
                }

                &--on {
                    color: var(--hi-switch-on-text-color, var(--hi-switch-on-color, var(--hi-background-default)));
                }
            }
        }
    }
</style>
